// charts图表功能
import { ref,reactive, toRaw } from 'vue';
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus';
import { getBalance } from '@/utils/api'
import { numFormat } from '@/utils/func'
export default function(){
    // 图表对象
    let myChart:any// echarts.init(document.getElementById("mychart"));
    const option = reactive({
          // color: ['#FF6347', '#87CEFA', '#32CD32', '#FFD700', '#6A5ACD'],
          tooltip: {
            trigger: 'item'
          },
          legend: { // 对图形的解释部分
            orient    : 'vertical',
            itemWidth : 35,
            itemHeight: 20,
            left      : 250,
            y         : 'center',
            formatter : (name:string) => {
              let obj = option.series[0].data.filter(v=>v.name == name)[0];
              return ` ${name}：${numFormat(toRaw(obj.value).toString())}元`
            },
            textStyle : {
              padding : [5, 0, 0, 0],
              fontSize: 16
            }
        },
        series: [
            {
                type : "pie", // type设置为饼图
                left : '-400',  // 将饼状图靠左对齐
                label: {
                    show    : false,
                    position: 'top left'
                },
                data : [
                    {
                        value: 0,
                        name : ""
                    },
                    // {
                    //     value: 463,
                    //     name : "转出"
                    // },
                ]
            }
        ]
    })
    const pieLoading = ref(false);
    const nowPieUpdateTime = ref('');
    function setChart(ele:HTMLElement){
        myChart = echarts.init(ele);
        myChart.setOption(option);
        // 随着屏幕大小调节图表
        // window.addEventListener("resize", () => {
        //     myChart.resize();
        // });
    }
    function setOption(params:{value:number,name:string}[]){
        option.series[0].data = params;
        myChart.setOption(option);
    }
    // 获取echarts图表数据
    function getPieData(){
        pieLoading.value = true
        setTimeout(()=>{
            pieLoading.value = false
        },1000)
        getBalance().then(res=>{
            console.log('资产概念:',res.data);
            if(res.data.code == 200){
                res.data.data
               // 
                let arr :{
                    value: number,
                    name : string
                }[]= []
                for(let key in res.data.data){
                    if(key === "tlAmount"){
                        arr.push({
                            value: res.data.data[key],
                            name : "通联余额"
                        })
                    }
                    if(key === "yztAmount"){
                        arr.push({
                            value: res.data.data[key],
                            name : "云直通金额"
                        })
                    }
                    if(key === "currentTime"){
                        nowPieUpdateTime.value =  res.data.data[key]
                    }
                }
                setOption(arr)
            }else{
                ElMessage({
                    message: res.data.msg,
                    type: 'error',
                    duration: 2 * 1000
                })
            }
            pieLoading.value = false
        }).catch(err=>{
            ElMessage({
                message: err,
                type: 'error', 
                    duration: 2 * 1000           
            })
            pieLoading.value = false
        })
    }
    return {setChart,setOption,getPieData,nowPieUpdateTime,pieLoading}
}

